<template>
  <div>
    <top-nav-bar :applyPageRoute="printtitle" @back="$router.go(-1)"></top-nav-bar>
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <div class="topCard">
          <div class="title">
            <span v-if="data.end_time<=nowDay">
              <a-tag color="#999">已结束</a-tag>
            </span>
            <span v-else>
              <a-tag color="#3BBDAA" v-if="data.is_release==1">进行中</a-tag>
              <a-tag color="#2db7f5" v-else>未发布</a-tag>
            </span>
            <span class="title_text">
              <span v-if="data.template&&data.template.title">【{{data.template.title}}】</span>
              <span v-if="data.activity_title">{{data.activity_title}}</span>
            </span>
          </div>
          <div class="displayFlex">
            <div class="count_area">
              <div class="title">总转发数</div>
              <div class="number">{{count.forward}}</div>
            </div>
            <div class="count_area center">
              <div class="title">总浏览数</div>
              <div class="number">{{count.views}}</div>
            </div>
            <div class="count_area">
              <div class="title">总报名数</div>
              <div class="number">{{count.signUp}}</div>
            </div>
          </div>
        </div>
      </a-card>
      <a-card
      v-if="showTabs"
        :bordered="false"
        style="margin-top:8px;"
        :bodyStyle="{padding:'0 16px','padding-top':'6px'}"
      >
        <a-tabs v-model="tabsValue">
          <a-tab-pane :key="1" tab="时间趋势分析">
            <time-component v-bind:data="data"></time-component>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="传播转化分析">
            <diffuse v-bind:data="data" :count="count"></diffuse>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import { activityInfo } from '@/api/activity'
import moment from 'moment'
import timeComponent from './components/time'
import diffuse from './components/diffuse'
export default {
  components: {
    topNavBar,
    timeComponent,
    diffuse,
  },
  data() {
    return {
      printtitle: '数据统计',
      loading: true,
      tabsValue: 1,
      count: {
        forward: null,
        views: null,
        signUp: null,
      },
      data: {
        is_release: null,
        activity_title: null,
        end_time: null,
      },
      nowDay: null, //今天的时间戳
      showTabs:false,
    }
  },
  created() {
    this.nowDay = moment().startOf('day').valueOf() / 1000
    activityInfo(Number(this.$route.query.activityID))
      .then((res) => {
        this.count = {
          forward: res.forward_number,
          views: res.views_number,
          signUp: res.student ? res.student.length : 0,
        }
        this.data = res
        this.showTabs = true
      })
      .catch((err) => {
        this.$message.error(err.data.message || '加载失败，请刷新后重试~')
      })
      .finally(() => {
        this.loading = false
      })
  },
  methods: {
    moment,
  },
}
</script>

<style lang="less" scoped>
.topCard {
  .title {
    span {
      display: inline-block;
      vertical-align: middle;
    }
    .title_text {
      font-weight: 500;
      font-size: 20px;
    }
  }
  .displayFlex {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .count_area {
      padding: 10px;
      flex: 1 1;
      width: 100%;
      text-align: center;
      .number {
        font-size: 24px;
        color: #333;
        margin: 2px 0;
      }
    }
    .center {
      margin: 10px 0;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
    }
  }
}
</style>